﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="keywords" content="HTML部分标签演示"/>
    <link href="Content/Site.css"  rel="stylesheet" />
    <title>HTML部分标签演示</title>
</head>
<body>
    <!-- 
        网页布局
        html ->div + css
        html5 -> 语义化标签 + div +css
        -->
    <header class="header">
        <h1>XXX有限公司</h1>
        <img src="" alt="XXX有限公司" />
    </header>
    <nav class="nav sep2">
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">公司概况</a></li>
            <li><a href="#">产品简介</a></li>
            <li><a href="#">联系我们</a></li>
        </ul>
    </nav>

    <main class="main">
        <section class="row-1 sep2">
            <h2>产品展示</h2>
            <p>多个产品轮播展示</p>
        </section>
        <section class="row-2 sep">
            <h2>客户服务</h2>
            <article>
                <h3>在线联系</h3>
                <p>通过在线联系了解产品信息</p>
            </article>
            
        </section>
    </main>
    <aside class="aside sep2">
        <ul>
            <li>产品分类I</li>
            <li>产品分类II</li>
            <li>产品分类III</li>
            <li>产品分类IV</li>
        </ul>
    </aside>

    <footer class="footer sep">
        <p>Copyright 2020 &copy;</p>
        <address onclick="addressOnclick()">江西省九江市前进东路53号</address>
    </footer>

    <script>
        function addressOnclick() {
            alert("address绑定点击事件");
            document.getElementById("my_address").style.color = "red";
        }
    </script>
</body>
</html>